
<!DOCTYPE html>
<!--[if lt IE 7]>   <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>      <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>      <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>

		<meta charset="utf-8">
		<title>Summarize - Responsive Blog/Magazine</title>
		<meta name="description" content="">

		<!-- Mobile Devices Viewport Resset-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">

		<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">

		<link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css">
		<!--[if IE 8]>
			<link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome-ie7.min.css">
		<![endif]-->

		<link rel="stylesheet" href="../vendor/prettyPhoto/css/prettyPhoto.css">

		<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Lato:300,400,700,400italic,700italic|Droid+Serif' rel='stylesheet' type='text/css'>

		<!-- base layout styling -->
		<link rel="stylesheet" href="../css/base.css">

		<!-- components styling -->
		<link rel="stylesheet" href="../css/components.css">
		
		<!-- template colorschemes -->
		<link rel="stylesheet" href="../colorschemes/dark.css">

		<script src="../vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>

	</head>
	<body>

		<h1 class="sr-only">Summarize</h1>
			
		<nav id="header" class="header-navbar" role="navigation">

			<div class="header-navbar-inner container">
			
				<div id="brand" class="navbar-brand">
					<a href="index.html" rel="bookmark">

						<!-- to disable lazy loading, remove data-src and data-src-retina -->
						<img src="../img/dark-logo.png" data-src="../img/dark-logo.png" data-src-retina="../img/logo-retina.png" width="244" height="56" alt="">

						<!--fallback for no javascript browsers-->
						<noscript>
							<img src="../img/dark-logo.png" alt="">
						</noscript>
					</a>
				</div>

				<ul class="nav nav-pages hidden-xs">
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Advertise </a></li>
					<li><a href="#">Terms &amp; Conditions</a></li>
					<li><a href="#">Privacy</a></li>
				</ul>

				<ul class="nav nav-icons">
					<li>
						<a href="#" class="btn-icon" data-toggle=".header-navbar-inner" data-toggle-class="search-toggled-in">
							<span class="search-toggled-out-icon glyphicon glyphicon-search"></span>
							<span class="search-toggled-in-icon glyphicon glyphicon-remove"></span>
						</a>
					</li>
				</ul>

				<div class="search-wrapper js-stoppropagation">
					<div class="search-wrapper-inner">
						<form>
							<input type="text" value="" placeholder="search ... ">
							<button class="btn-icon" type="submit"><span class="glyphicon glyphicon-search"></span></button>
						</form>
					</div>
				</div>

				<ul class="nav navbar-nav">
					<li class="nav-all pull-right full-subnav-wrapper active">

						<a href="#" data-toggle="li"> 
							<span class="text">All Categories</span>
							<span class="toggle glyphicon glyphicon-align-justify"></span>
						</a>

						<div class="row subnav-wrapper">
							
							<div class="col-md-2 col-sm-2 bg-bar">
								<strong class="subnav-header">Pages</strong>
								<ul class="subnav-full">
									<li><a href="index.html">Blog 3 Columns</a></li>
									<li><a href="blog.html">Blog 2 Columns</a></li>
									<li><a href="blog-grids.html">Blog Grids</a></li>
									<li><a href="reviews.html">Reviews Archive</a></li>
									<li><a href="single.html">Single Blog</a></li>
									<li><a href="single-full.html">Single Blog (Full)</a></li>
									<li class="active"><a href="components.html">Components</a></li>
								</ul>
							</div>

							<div class="col-md-2 col-sm-2">
								<strong class="subnav-header">Colorschemes</strong>
								<ul class="subnav-full">
									<li><a href="../html/">Coolorize</a></li>
									<li><a href="../html-dark/">Dark</a></li>
									<li><a href="../html-light/">Light</a></li>
									<li><a href="#">Amet Commodo</a></li>
									<li><a href="#">Consectetur </a></li>
									<li><a href="#">Adipisicing</a></li>
									<li><a href="#">Duis aute </a></li>
								</ul>
							</div>

							<div class="col-md-2 col-sm-2">
								<strong class="subnav-header">Banner Placements</strong>
								<ul class="subnav-full">
									<li><a href="banner-index.html">Home</a></li>
									<li><a href="banner-single.html">Single</a></li>
									<li><a href="#">Ipsum  Nisi </a></li>
									<li><a href="#">Dolor Aliquip</a></li>
								</ul>
							</div>

							<div class="col-md-2 col-sm-2">
								<strong class="subnav-header">Category</strong>
								<ul class="subnav-full">
									<li><a href="#">Ipsum  Nisi </a></li>
									<li><a href="#">Dolor Aliquip</a></li>
									<li><a href="#">Amet Commodo</a></li>
									<li><a href="#">Consectetur </a></li>
								</ul>
							</div>

							<div class="col-md-2 col-sm-2">
								<strong class="subnav-header">Category</strong>
								<ul class="subnav-full">
									<li><a href="#">Consectetur </a></li>
									<li><a href="#">Adipisicing</a></li>
									<li><a href="#">Ipsum  Nisi </a></li>
									<li><a href="#">Dolor Aliquip</a></li>
								</ul>
							</div>

							<div class="col-md-2 col-sm-2">
								<strong class="subnav-header">Category</strong>
								<ul class="subnav-full">
									<li><a href="#">Ipsum  Nisi </a></li>
									<li><a href="#">Dolor Aliquip</a></li>
									<li><a href="#">Amet Commodo</a></li>
									<li><a href="#">Consectetur </a></li>
								</ul>
							</div>

						</div>
					</li>
					<li class="active">
						<a href="#" data-toggle="li">Features</a>
						<div class="subnav-wrapper">
							<ul class="subnav">
								<li><a href="index.html">Blog 3 Columns</a></li>
								<li><a href="blog.html">Blog 2 Columns</a></li>
								<li><a href="blog-grids.html">Blog Grids</a></li>
								<li><a href="reviews.html">Reviews Archive</a></li>
								<li><a href="single.html">Single Blog</a></li>
								<li><a href="single-full.html">Single Blog (Full)</a></li>
								<li class="active"><a href="components.html">Components</a></li>
								<li>
									<a href="#" data-toggle="li">Colorshemes</a>
									<div class="subnav-wrapper">
										<ul class="subnav">
											<li><a href="../html/">Coolorize</a></li>
											<li><a href="../html-dark/">Dark</a></li>
											<li><a href="../html-light/">Light</a></li>
										</ul>
									</div>
								</li>
								<li>
									<a href="#" data-toggle="li">Banner Placements</a>
									<div class="subnav-wrapper">
										<ul class="subnav">
											<li><a href="banner-index.html">Home</a></li>
											<li><a href="banner-single.html">Single</a></li>
										</ul>
									</div>
								</li>
							</ul>
						</div>
					</li>
					<li class="full-subnav-wrapper">
						<a href="#" data-toggle="li">Drop Down 2</a>

						<div class="row subnav-wrapper subnav-tabbed">
							
							<ul class="col-md-2 col-sm-2 subnav-tabbed-tabs alignright">
								
								<li class="active"><a href="#tabAll">All </a></li>
								<li><a href="#tabNotebook">Notebook</a></li>
								<li><a href="#tabSmartphone">Smartphone</a></li>
								
							</ul>

							<div class="col-md-10 col-sm-10 subnav-tabbed-panels">

								<div id="tabAll" class="subnav-tabbed-panel active">
									
									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
													<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_1.jpg" data-src-retina="../uploads/460x460_1.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_1.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>
									
									</article>

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_2.jpg" data-src-retina="../uploads/460x460_2.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_2.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>

									</article>

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_3.jpg" data-src-retina="../uploads/460x460_3.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_3.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>
									
									</article>

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_4.jpg" data-src-retina="../uploads/460x460_3.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_4.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>
									
									</article>
									
								</div>
								<div id="tabNotebook" class="subnav-tabbed-panel">

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_2.jpg" data-src-retina="../uploads/460x460_2.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_2.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>

									</article>

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_3.jpg" data-src-retina="../uploads/460x460_3.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_3.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>

									
									</article>

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_4.jpg" data-src-retina="../uploads/460x460_3.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_4.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>
									
									</article>
									
									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_5.jpg" data-src-retina="../uploads/460x460_5.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_5.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>

									
									</article>

								</div>
								<div id="tabSmartphone" class="subnav-tabbed-panel">

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_3.jpg" data-src-retina="../uploads/460x460_3.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_3.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>
									
									</article>

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_4.jpg" data-src-retina="../uploads/460x460_3.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_4.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>
									
									</article>
									
									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_5.jpg" data-src-retina="../uploads/460x460_5.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_5.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>
									
									</article>

									<article class="entry type-post style-thumbnail col-sm-3 col-md-3">

										<figure class="entry-thumbnail">
											<a href="single.html">
												<!-- to disable lazy loading, remove data-src and data-src-retina -->
												<img src="../img/placeholder.gif" data-src="../uploads/230x230_1.jpg" data-src-retina="../uploads/460x460_1.jpg" width="230" height="230" alt="">

												<!--fallback for no javascript browsers-->
												<noscript>
													<img src="../uploads/230x230_1.jpg" alt="">
												</noscript>
											</a>
										</figure>

										<h3 class="entry-title"><a href="single.html">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</a> </h3>
									
									</article>

								</div>

							</div>

						</div>

					</li>
					<li>
						<a href="#" data-toggle="li">Drop Down 3</a>

						<div class="subnav-wrapper">
							<ul class="subnav-entries">
								<li><a href="#">Recent Entry fits in this type of dropdown. </a></li>
								<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit </a></li>
								<li><a href="#">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </a></li>
								<li><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco </a></li>
								<li><a href="#">Laboris nisi ut aliquip ex ea commodo consequat. </a></li>
								<li><a href="#">Duis aute irure dolor in reprehenderit</a></li>
								<li><a href="#">In voluptate velit esse cillum dolore eu fugiat nulla pariatur</a></li>
								<li><a href="#">Excepteur sint occaecat cupidatat non proident</a></li>
								<li><a href="#">Sunt in culpa qui officia deserunt mollit anim id est laborum</a></li>
							</ul>
						</div>

					</li>
					<li><a href="#">Category 1</a></li>
					<li><a href="#">Category 2</a></li>
					<li><a href="#">Category 3</a></li>
					<li><a href="#">Category 4</a></li>
					<li><a href="#">Category 5</a></li>
					<li><a href="#">Category 6</a></li>
					<li><a href="#">Category 7</a></li>
				</ul>

			</div>

		</nav>

		<div id="main" class="container">

			<div id="content" class="content bg-base section">
				
				<div class="ribbon ribbon-highlight">
					<ol class="breadcrumb ribbon-inner">
						<li><a href="#">Home</a></li>
						<li><a href="#">Features</a></li>
						<li class="active" title="Postman will send notifications to your flashy smartphone about popular people and their latest shouts">Components</li>
					</ol>
				</div>

				<header class="page-header">

					<h1 class="page-title full-page-title">
						Components
					</h1>

				</header>
				
				<div class="row style-single">
					
					<nav class="col-sm-3 sidenav">
						<ul class="nav">
							<li><a href="#Button">Buttons</a></li>
							<li><a href="#accordion">Accordion</a></li>
							<li><a href="#tabs">Tabs</a></li>
							<li><a href="#table">Table</a></li>
							<li><a href="#imageAndVideo">Image and Video</a></li>
							<li><a href="#grid">Grid</a></li>
							<li><a href="#typography">Typography</a></li>
						</ul>
					</nav>

					<div class="col-sm-9 entry-content">

						<!--Button-->
						<h2 id="Button">Button</h2>

						<a href="#" class="btn btn-default">Default</a>
						<a href="#" class="btn btn-primary">Primary</a>
						<a href="#" class="btn btn-warning">Warning</a>
						<a href="#" class="btn btn-danger">Danger</a>
						<a href="#" class="btn btn-info">Info</a>
						<a href="#" class="btn btn-success">Success</a>
						<a href="#" class="btn btn-primary"><i class="icon icon-arrow-left"></i> Icon</a>
						<a href="#" class="btn btn-default btn-xs">Extra Small</a>
						<a href="#" class="btn btn-danger btn-sm">Small</a>
						<a href="#" class="btn btn-info btn-lg">Large</a>

						<!--/.Button-->

						<!--Accordion-->
						<h2 id="accordion">Accordion</h2>

						<div class="panel-group" id="collapsibleID">
							<div class="panel panel-primary">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
											Collapsible Group Item #1
										</a>
									</h4>
								</div>
								<div id="collapseOne" class="panel-collapse collapse in">
									<div class="panel-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
									</div>
								</div>
							</div>
							<div class="panel panel-primary">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
											Collapsible Group Item #2
										</a>
									</h4>
								</div>
								<div id="collapseTwo" class="panel-collapse collapse">
									<div class="panel-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
									</div>
								</div>
							</div>
							<div class="panel panel-primary">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
											Collapsible Group Item #3
										</a>
									</h4>
								</div>
								<div id="collapseThree" class="panel-collapse collapse">
									<div class="panel-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
									</div>
								</div>
							</div>
						</div>
						<!--/.accordion-->


						<!--.table-->
						<h2 id="table">Table</h2>

						<div class="table-responsive">
							<table class="table table-hover table-bordered">
								<thead>
									<tr>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>Table Cell</td>
										<td>Table Cell</td>
										<td>Table Cell</td>
										<td>Table Cell</td>
									</tr>
									<tr>
										<td>Table Cell</td>
										<td>Table Cell</td>
										<td>Table Cell</td>
										<td>Table Cell</td>
									</tr>
									<tr>
										<td>Table Cell</td>
										<td>Table Cell</td>
										<td>Table Cell</td>
										<td>Table Cell</td>
									</tr>
								</tbody>
							</table>
						</div>

						<!--.imageAndVideo-->
						<h2 id="imageAndVideo">Image and Video</h2>

						<div class="row">
							<div class="col-sm-6">
								<a href="../uploads/720x420_1.jpg" title="Title" data-rel="prettyPhoto">
									<span class="overlay"><i class="icon icon-search"></i></span>
									<img src="../uploads/480x280_1.jpg" alt=""></a>
							</div>
							<div class="col-sm-6">
								<a href="https://wrapbootstrap.com/e&amp;iframe=true&amp;width=900&amp;height=400" title="Title" data-rel="prettyPhoto">
									<span class="overlay"><i class="icon icon-search"></i></span>
									<img src="../uploads/480x280_1.jpg" alt=""></a>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6">
								<div class="video-container">
									<iframe src="http://player.vimeo.com/video/6284199?title=0&amp;byline=0&amp;portrait=0" width="800" height="450"></iframe>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="video-container">
									<iframe src="http://youtube.com/v/t58WCSn5lNI" width="800" height="450"></iframe>
								</div>
							</div>
						</div>

						<!--.tabs-->
						<h2 id="tabs">Tabs</h2>

						<ul class="nav nav-tabs" id="myTab">
							<li class="active"><a href="#home">Home</a></li>
							<li><a href="#profile">Profile</a></li>
							<li><a href="#messages">Messages</a></li>
							<li><a href="#settings">Settings</a></li>
						</ul>

						<div class="tab-content">
							<div class="tab-pane active" id="home">
								<p>Home content</p>
							</div>
							<div class="tab-pane" id="profile">
								<p>Profile content</p>
							</div>
							<div class="tab-pane" id="messages">
								<p>Messages content</p>
							</div>
							<div class="tab-pane" id="settings">
								<p>Settings content</p>
							</div>
						</div>

						<!--/.tabs-->

						<!--Grid-->
						<h2 id="grid">Grid</h2>

						<div class="row">
							<div class="col-sm-1">
								<p><strong>Column 1</strong> Lorem ipsum dolor sit amet.</p>
							</div>
							<div class="col-sm-11">
								<p><strong>Column 11</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut sit amet blandit arcu. Aenean vestibulum mi quis est ultrices vehicula. Quisque pellentesque augue ante, eget placerat odio adipiscing sed. Nulla adipiscing dapibus adipiscing. Suspendisse purus sapien, luctus pulvinar felis in, condimentum dapibus eros. Sed eget sem fermentum, lobortis massa sed, elementum nisi. Donec adipiscing aliquam nibh, et ultrices nunc pellentesque sed.</p>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-2">
								<p><strong>Column 2</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
							</div>
							<div class="col-sm-10">
								<p><strong>Column 10</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut sit amet blandit arcu. Aenean vestibulum mi quis est ultrices vehicula. Quisque pellentesque augue ante, eget placerat odio adipiscing sed. Nulla adipiscing dapibus adipiscing. </p>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-3">
								<p><strong>Column 3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.  sed do eiusmod tempor incididunt ut </p>
							</div>
							<div class="col-sm-9">
								<p><strong>Column 9</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut sit amet blandit arcu. Aenean vestibulum mi quis est ultrices vehicula. Quisque pellentesque augue ante </p>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<p><strong>Column 4</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </p>
							</div>
							<div class="col-sm-8">
								<p><strong>Column 8</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut sit amet blandit arcu.  </p>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-5">
								<p><strong>Column 5</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
							</div>
							<div class="col-sm-7">
								<p><strong>Column 7</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut sit amet blandit arcu.  </p>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6">
								<p><strong>Column 6</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
							</div>
							<div class="col-sm-6">
								<p><strong>Column 6</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. </p>
							</div>
						</div>

						<!--/.Grid-->

						<!--.typography-->
						<h2 id="typography">Typography</h2>
						<blockquote>
							<p>"Better to remain silent and be thought a fool than to speak out and remove all doubt" <small> Abraham Lincoln</small></p>
						</blockquote>

						<h1>This is a Heading 1 Element</h1>
						<h2>This is a Heading 2 Element</h2>
						<h3>This is a Heading 3 Element</h3>
						<h4>This is a Heading 4 Element</h4>
						<h5>This is a Heading 5 Element</h5>
						<h6>This is a Heading 6 Element</h6>
						<!--/.typography-->


					</div><!--/.col-sm-9 entry-content-->

				</div>

			</div><!--/#content-->
			
		</div><!--#main.container-->

		<footer id="footer" class="footer-area">

			<div class="footer-top container">
	
				<div class="row">

					<div class="widget col-xs-12 col-sm-4">

						<h4 class="widget-title">Categories</h4>

						<ul class="entries links links-2-cols">
							<li><a href="blog.html">Entertainment</a></li>
							<li><a href="blog.html">Event</a></li>
							<li><a href="blog.html">Technology</a></li>
							<li><a href="blog.html">Social Media</a></li>
							<li><a href="blog.html">Tactical</a></li>
							<li><a href="reviews.html">Notebook</a></li>
							<li><a href="reviews.html">Smartphone</a></li>
							<li><a href="reviews.html">Tablet</a></li>
						</ul>

					</div><!--/.col-3-->

					<div class="clearfix visible-xs"></div>

					<div class="widget col-xs-6 col-sm-2">

						<h4 class="widget-title">Information</h4>

						<ul class="entries links links">
							<li><a href="#">About</a></li>
							<li><a href="#">Contact</a></li>
							<li><a href="#">Advertise </a></li>
							<li><a href="#">Terms &amp; Conditions</a></li>
							<li><a href="#">Privacy</a></li>
						</ul>

					</div><!--/.col-3-->

					<div class="widget col-xs-6 col-sm-2">

						<h4 class="widget-title">Follow Us</h4>

						<ul class="entries links">
							<li><a href="blog.html"><i class="icon-facebook-sign icon-2x"></i> Facebook</a></li>
							<li><a href="blog.html"><i class="icon-twitter-sign icon-2x"></i> Twitter</a></li>
							<li><a href="blog.html"><i class="icon-google-plus-sign icon-2x"></i> Google Plus</a></li>
							<li><a href="blog.html"><i class="icon-linkedin-sign icon-2x"></i> Linkedin</a></li>
						</ul>

					</div><!--/.col-3-->

					<div class="clearfix visible-xs"></div>

					<div class="widget col-xs-12 col-sm-4">

						<h4 class="widget-title">Subscribe</h4>

						<form class="form-horizontal" role="form">
							<div class="form-group">
								<label for="subscribeEmail" class="col-lg-2 control-label">EMAIL</label>
								<div class="col-lg-10">
									<input type="text" class="form-control" id="subscribeEmail" placeholder="Your Email">
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">RSS</label>
								<div class="col-lg-10">
									<p class="form-control-static">
										<a href=""><i class="icon-rss-sign"></i> Posts</a> &nbsp; &nbsp;
										<a href=""><i class="icon-rss-sign"></i> Comments</a>
									</p>
								</div>
							</div>
						</form>

					</div><!--/.col-3-->

				</div><!--row.-->

			</div>

			<div class="footer-bottom">

				<div class="container aligncenter">

					<p>&copy;2013 by <a href="http://coolorize.com">Coolorize Network</a>. All Right Reserved. <p>

				</div>

			</div>

		</footer>
		
		<script src="../vendor/jquery-1.10.1.min.js"></script>
		<!--
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="../vendor/jquery-1.10.1.min.js"><\/script>')</script>
	-->

		<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

		<script src="../vendor/prettyPhoto/jquery.prettyPhoto.js"></script>


		<script src="../vendor/jquery.unveil.min.js"></script>
		
		<script src="../js/main.js"></script>

	</body>
</html>